<template>
    
  <el-card style="margin: 10px;">
    <h3 style="margin: 5px;">详情</h3>
    <div style="margin-top: 30px;">
      <div style="float: left;width: 30%;">
    <div><span>设备编号：{{ parsedRowData.asset_number }}</span></div><br>
    <div><span >设备品牌：{{ parsedRowData.brand }}  </span></div><br>
    <div><span> 设备类型：{{ parsedRowData.type }} </span></div><br>
    <div><span>所属系统组织：{{ parsedRowData.department }}</span></div><br>
    <div><span> 设备生产日期：{{ parsedRowData.date_of_manufacture }}</span></div>
  </div>


  <div style="float:inline-start;width: 30%;">
    <div><span>设备名称：{{ parsedRowData.name }}</span></div><br>
    <div><span >设备型号：{{ parsedRowData.model }} </span></div><br>
  <div><span> 供应商：{{ parsedRowData.supplier}} </span></div><br>
    <div><span>设备位置：{{ parsedRowData.location }}</span></div><br>
    <div><span> 设备入厂日期：{{ parsedRowData.entry_date_to_the_factory }}</span></div>
  </div>

  <div >
    <div><span>设备状态：{{ parsedRowData.one }}</span></div><br>
    <div><span >设备规格：{{ parsedRowData.specification }} </span></div><br>
    <div><span> 所属车间：{{ parsedRowData.workshop_affiliation}} </span></div><br>
    <div><span>设备负责人：{{ parsedRowData.person_in_charge }}</span></div><br>
    <div><span> 备注：{{ parsedRowData.remark }}</span></div>
  </div>

    </div>
    <br>
    <br>
    <br>
    <hr>

    <el-card style="max-height: 300px;margin-top: 20px;">
    <div style="height: 30px;">
    <el-tabs v-model="activeName" class="demo-tabs" @tab-click="handleClick">
    <el-tab-pane label="点检履历" name="first">点检履历</el-tab-pane>
    <el-tab-pane label="保养履历" name="second">保养履历</el-tab-pane>
    <el-tab-pane label="维修履历" name="third">维修履历</el-tab-pane>

  </el-tabs>
    </div>
    <hr>
    <div style="height: 280px;"></div>
  </el-card>

  </el-card>


</template>

<script setup lang="ts">
import { useRoute } from 'vue-router';
import { onMounted, ref } from 'vue';

const route = useRoute();
const parsedRowData=ref({})
// 在组件挂载后访问路由参数
onMounted(() => {
  // 通过 route.query 可以获取所有查询参数
  // 这里的 'row' 是你在传递时使用的参数名
 
  console.log('从列表页传递过来的数据:', route.query.row);

  // 如果 rowData 是一个 JSON 字符串，你需要解析它
  // 比如，如果传递的是 { code: 'ABC' } 这样的对象，它会以字符串形式传递
  // 你可能需要根据实际情况进行 JSON.parse()
  try {
     parsedRowData.value = JSON.parse(route.query.row as string);
    console.log('解析后的数据:', parsedRowData);
    // 现在你可以使用 parsedRowData.code 等属性了
  } catch (e) {
    console.error('解析传递的数据失败:', e);
  }
});


import type { TabsPaneContext } from 'element-plus'
import { bindData } from '@/components/basic/VolTable/VolTableDicData';

const activeName = ref('first')

const handleClick = (tab: TabsPaneContext, event: Event) => {
  console.log(tab, event)
}

</script>

<style scoped>
.demo-tabs > .el-tabs__content {
  padding: 32px;
  color: #6b778c;
  font-size: 32px;
  font-weight: 600;
}
</style>